<template>
  <div class="product-list-box">
    <div v-for="(item,index) in productList" :key="index" class="product-item">
      <div class="product-header">
        <img class="product-img" :src="item.img">
        <div>
          <p class="p1">{{ item.name }}</p>
          <p class="p2">发布时间：{{ item.publishDate }}</p>
          <p class="p2">发布人：{{ item.userName }}</p>
        </div>
      </div>
      <div class="product-table">
        <TpTable
          :data="item.productStoreListResps"
          :columns="columns"
        >
          <template #handle="{row}">
            <el-button v-if="row.status !== 0" type="text" @click="editHandle(row, item.type)">编辑</el-button>
            <el-button type="text" @click="gotoDetail(row, item.type)">详情</el-button>
            <el-button type="text" @click="editStatus(row)">{{ row.status === 0 ? '下架': '上架' }}</el-button>
            <el-button v-if="row.status !== 0" class="danger-text-button" type="text" @click="deleteHandle(row)">删除</el-button>
          </template>
        </TpTable>
      </div>
    </div>
  </div>
</template>

<script>

import TpTable from '@/components/FormTable/components/tp-table.vue'
import { editProductStatus, deleteProduct } from '@/api/product'
import { mapGetters } from 'vuex'
export default {
  name: 'ProductTable',
  components: {
    TpTable
  },
  props: {
    productList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      productType: ''
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '产品编号', prop: 'productNo', attrs },
        { label: '适用门店', prop: 'shopName', attrs },
        { label: '产品名称', prop: 'productName', attrs },
        { label: '零售价', prop: 'retailPrice', formatter: 'money', attrs },
        { label: '发布时间', prop: 'publishDate', attrs },
        { label: '审核通过时间', prop: 'approveTime', attrs },
        { label: '状态', prop: 'statusStr', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '180px', fixed: 'right' }}
      ]
    }
  },

  created() {
    this.productType = this.currentSite.productType
  },
  methods: {

    // 详情
    gotoDetail(row, type) {
      const query = {
        id: row.id,
        productType: this.productType,
        source: 'detail'
      }
      // 票务 通过type区分景点和项目
      if (this.productType === 0) {
        query.type = type
      }
      this.$router.push({
        path: '/shop/product/detail',
        query
      })
    },

    // 编辑
    editHandle(row, type) {
      const path = '/shop/creatProduct'
      const query = { id: row.id, source: 'edit' }
      if (this.productType === 0) {
        query.type = type
        this.$router.push({
          path,
          query
        })
      }
      if (this.productType === 1) {
        this.$router.push({
          path,
          query
        })
      }
    },

    // 修改状态
    editStatus(row) {
      let status = ''
      let message = ''
      let tip = ''
      if (row.status === 0) {
        status = 1
        message = '确定要下架该商品吗？'
        tip = '下架成功'
      } else {
        status = 0
        message = '确定要上架该商品吗？'
        tip = '上架架成功'
      }
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(() => {
        const data = {
          id: row.id,
          status
        }
        editProductStatus(data).then(res => {
          this.$message.success(tip)
          this.$emit('refresh')
        }).catch(() => {})
      }).catch(() => {})
    },

    // 删除
    deleteHandle(row) {
      this.$confirm('确定要删除该商品吗？', '提示', {
        type: 'warning'
      }).then(() => {
        const data = {
          id: row.id
        }
        deleteProduct(data).then(res => {
          this.$message.success('删除成功')
          this.$emit('refresh')
        }).catch(() => {})
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables";
.product-table .el-table{
  display: block;
}
.product-item {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  margin-bottom: 20px;
  padding: 20px;
  .product-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;

    .product-img {
      width: 150px;
      height: 100px;
      margin-right: 20px;
    }

    .p1 {
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .p2 {
      font-size: 18px;
      color: $regular-text;
      margin-bottom: 10px;
    }
  }
}
</style>
